<template>
  <div class="box">
    <van-nav-bar
      title="个人主页"
      left-text="返回"
      left-arrow
      @click-left="$router.push({ path: '/paihang' })"
    />
    <div class="box-info">
      <img :src="userList.cover" alt="" class="userimg" lazy-load />
      <div class="username">
        <h3>{{ userList.name }}</h3>
        <p>单曲数:{{ userList.musicSize }}</p>
        <p>专辑数:{{ userList.albumSize }}</p>
        <p>mv数:{{ userList.mvSize }}</p>
      </div>
    </div>
    <van-tabs v-model="active">
      <van-tab title="专辑"></van-tab>
      <van-tab title="mv"></van-tab>
      <van-tab title="歌手详情"></van-tab>
      <van-tab title="相似歌手"></van-tab>
    </van-tabs>
    <div
      class="zhuanji"
      v-for="(item, index) in zhuanjiList"
      :key="index"
      @click="zhuanjiClick(index)"
      v-show="active == 0"
    >
      <img :src="item.blurPicUrl" alt="" lazy-load />
      <van-cell title="单元格" value="内容" />
    </div>
    <!-- mv -->
    <div
      class="mvimg"
      v-show="active == 1"
      v-for="item in mvList"
      :key="item.id"
      @click="$router.push({ path: '/mvfind', query: { id: item.id } })"
    >
      <img :src="item.imgurl" alt="" lazy-load />
    </div>

    <!-- 歌手详情 -->
    <div class="userXiang" v-show="active == 2">
      <h3>{{ userList.name }}简介</h3>
      <p>{{ songInfo.briefDesc }}</p>
      <div v-for="(item, index) in songUserInfo" :key="index">
        <h3>{{ item.ti }}</h3>
        <p>{{ item.txt }}</p>
      </div>
    </div>

    <van-row>
      <van-col span="12" v-for="item in songUserList" :key="item.id">
        <div
          class="siImgInfo"
          v-show="active == 3"
          @click="$router.push({ path: '/songUser', query: { id: item.id } })"
        >
          <img :src="item.img1v1Url" alt="" class="siImg" lazy-load />
          <p>{{ item.name }}</p>
        </div>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import { songXiang } from '../songuser/songuser'
import { zhuanji, zhuanjiText, songUserInfo, choleUser } from './index'
import { songMv } from '../find/find'
export default {
  data () {
    return {
      userList: [],
      active: 0,
      zhuanjiList: [], // 专辑
      mvList: [], // mv
      songInfo: '', // 歌手相信信息
      songUserInfo: [], //歌手描述信息
      songUserList: [] //相似歌手
    }
  },
  computed: {
    // 专辑id
    // ...mapState(['zhuanjiId'])
  },
  async created () {
    // console.log(this.$route.query.id)
    let res = await songXiang({ id: this.$route.query.id })
    console.log(res)
    this.userList = res.data.data.artist

    // 专辑
    let reszhuanji = await zhuanji({ id: this.$route.query.id })
    this.zhuanjiList = reszhuanji.data.hotAlbums

    console.log(reszhuanji)
    // reszhuanji.data.hotAlbums.forEach(async value => {
    //   value.id
    //   let resText = await zhuanjiText({
    //     id: value.id
    //   })
    //   console.log(resText)
    // })

    // 拿到专辑的所有id
    let arr = []
    for (let i = 0; i < this.zhuanjiList.length; i++) {
      arr.push(this.zhuanjiList[i].id)
    }

    // console.log(arr)
    // 存到vuex中
    this.$store.commit('getZhuanjiId', arr)

    // mv
    let resmv = await songMv({ id: this.$route.query.id })
    console.log(resmv)
    this.mvList = resmv.data.mvs

    // 歌手详细信息
    let resSongUser = await songXiang({ id: this.$route.query.id })
    console.log(resSongUser)
    this.songInfo = resSongUser.data.data.artist

    // 歌手描述信息
    let resSongUserInfo = await songUserInfo({ id: this.$route.query.id })
    console.log(resSongUserInfo)
    this.songUserInfo = resSongUserInfo.data.introduction
    // console.log(this.songUserInfo)

    // 相似歌手
    let msgUser = await choleUser({ id: this.$route.query.id })
    console.log(msgUser)
    this.songUserList = msgUser.data.artists
  },
  methods: {
    async zhuanjiClick (index) {
      console.log(this.$store.state.zhuanjiId[index])
      // 专辑内容
      let resText = await zhuanjiText({
        id: this.$store.state.zhuanjiId[index]
      })
      console.log(resText)
    }
  }
}
</script>

<style>
.box-info {
  display: flex;
}
.userimg {
  height: 150px;
  width: 150px;
  border-radius: 10px;
  margin: 20px 20px;
}
.box-info h3 {
  font-size: 20px;
}
.username {
  font-size: 14px;
}
.zhuanji {
  display: flex;
  margin-top: 20px;
  margin-left: 20px;
}
.zhuanji img {
  height: 100px;
  width: 100px;
}
.mvimg {
  height: 200px;
  margin-top: 10px;
  width: 100%;
}
.mvimg img {
  margin-bottom: 10px;
  width: 100%;
  height: 200px;
}
.userXiang {
  margin-left: 25px;
}
.userXiang h3 {
  font-size: 14px;
}
.userXiang p {
  font-size: 12px;
  text-indent: 2em;
  line-height: 20px;
  width: 95%;
}

.siImgInfo .siImg {
  height: 150px;
}
.siImgInfo p {
  margin: 5px 0;
  text-align: center;
  font-size: 14px;
}
</style>
